<template>
  <div class="dialogContentBox">
    <el-form :model="record" ref="form" :rules="rules" :inline="true" :hide-required-asterisk="true" label-position="left" style="margin:0 20px;">
      <el-form-item style="width:430px;" label-width="110px" :label="$t('名称')" prop="name">
        <el-input v-emoji style="width:215px;" v-model="record.name" ref="name" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:325px;" label-width="110px" :label="$t('责任人')" prop="responsible">
        <el-select v-model="record.responsible" :placeholder="$t('请选择')" size='small'>
          <el-option v-for="item in responsibleList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width:430px;" label-width="110px" :label="$t('描述')" prop="desc">
        <el-input v-emoji style="width:215px;" v-model="record.desc" ref="desc" size='small' type="textarea" @keydown.native="handleKeyCode($event)" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
      </el-form-item>
      <el-form-item style="width:325px;" label-width="110px" :label="$t('资产类型')" prop="type">
        <el-input v-emoji style="width:215px;" v-model="record.type" ref="types" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:430px;" label-width="110px" :label="$t('生产商')" prop="manufacturer">
        <el-input v-emoji style="width:215px;" v-model="record.manufacturer" ref="manufacturer" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:325px;" label-width="110px" :label="$t('资产位置')" prop="site">
        <el-input v-emoji style="width:215px;" v-model="record.site" ref="site" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:430px;" label-width="110px" :label="$t('固件版本号')" prop="firmware_num">
        <el-input v-emoji style="width:215px;" v-model="record.firmware_num" ref="firmware" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:325px;" label-width="110px" :label="$t('资产型号')" prop="model">
        <el-input v-emoji style="width:215px;" v-model="record.model" ref="model" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:430px;" label-width="110px" :label="$t('操作系统版本号')" prop="os_num">
        <el-input v-emoji style="width:215px;" v-model="record.os_num" ref="osNum" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:325px;" label-width="110px" :label="$t('软件版本号')" prop="software_num">
        <el-input v-emoji style="width:215px;" v-model="record.software_num" ref="softwareNum" size='small'></el-input>
      </el-form-item>
      <el-form-item style="width:430px;" label-width="110px" :label="$t('IP地址')" prop="ip_item">
        <el-input v-emoji style="width:215px;" v-model="record.ip_item" ref="ipItem" size='small'></el-input>
        <el-button type="success" size="small" @click="addAddr(record.ip_item)" class="addClick">{{$t('添加')}}</el-button>
      </el-form-item>

      <el-form-item style="width:325px;" label-width="110px" :label="$t('IP类型')">
        <el-radio-group v-model="record.ip_type" :disabled='record.id?true:false'>
          <el-radio :label="1" class="IPV4">IPV4</el-radio>
          <el-radio :label="4" class="IPv6">IPV6</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-table size='mini' :data="record.ip" stripe border style="width: 100%;margin-top: 5px;">
        <el-table-column prop='ip' :label="$t('IP地址')" align="center">
          <template slot-scope="scope">
            <tooltip :copyText="scope.row" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('操作')" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, record.ip)" type="danger" plain size="mini" :class="'del'+(scope.$index+1)">
              {{$t('删除')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { getResponsibleArray } from '@/api/list/assets/responsible'
export default {
  name: 'AssetobjectDialog',
  data () {
    var validateName = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else {
        callback()
      }
    }
    var validateIp = (rule, value, callback) => {
      let ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      let ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
      if (value === '') {
        callback()
      } else if (value !== '' && this.record.ip_type === 1 && ipv4.test(value)) {
        callback()
      } else if (value !== '' && this.record.ip_type === 4 && ipv6.test(value)) {
        callback()
      } else {
        callback(new Error(this.$t('IP格式不正确')))
      }
    }

    return {
      dialogVisible: false,
      responsibleList: [],
      record: {
        id: null,
        name: '',
        ip_type: 1,
        ip: [],
        ip_item: '',
        desc: '',
        manufacturer: '',
        firmware_num: '',
        os_num: '',
        responsible: '',
        type: '',
        site: '',
        model: '',
        software_num: ''
      },
      recordCopy: {
        id: null,
        name: '',
        ip_type: 1,
        ip: [],
        ip_item: '',
        desc: '',
        manufacturer: '',
        firmware_num: '',
        os_num: '',
        responsible: '',
        type: '',
        site: '',
        model: '',
        software_num: ''
      },
      rules: {
        name: [{ required: false, validator: validateName, trigger: 'blur' }],
        ip_item: [{ required: false, validator: validateIp, trigger: 'blur' }]
      }
    }
  },
  mounted () {
    getResponsibleArray().then(res => {
      if (res.status === 0) {
        this.responsibleList = res.info
      }
    })
  },
  watch: {
    'record.desc': {
      handler (newVal) {
        this.record.desc = newVal.replace(/[\r\n]/g, '')
      },
      immediate: true
    }
  },
  methods: {
    sendCommand () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.record.ip.length < 1) {
            this.$message({
              message: this.$t('请输入IP地址'),
              type: 'error'
            })
          } else {
            this.$emit('childForm', this.record, this.record.name)
          }
        }
      })
    },
    addAddr (data) {
      this.$refs['form'].validateField('ip_item', Error => {
        if (!Error && data) {
          this.record.ip.push(data)
          this.record.ip_item = ''
        }
      })
    },
    closeDialog () {
      this.responsibleList = []
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    handleKeyCode (event) {
      if (event.keyCode === 13) {
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>

<style scoped>
.dialogContentBox {
  max-height: calc(80vh - 184px);
  overflow-y: auto;
}
</style>
